<template>
  <el-dialog
    class="low-contrast-test-card-dialog"
    title="低对比度测试卡"
    width="500px"
    :visible.sync="dialogVisible"
    :close-on-click-modal="true"
    v-dialogDrag="true"
    append-to-body
    @open="handleDialogOpen"
    @closed="handleDialogClosed"
  >
    <div>
      <div style="font-size: 18px;">
        40mm有机玻璃（PMMA）模块：
      </div>
      <div>
        模块中设置圆盘。其中包括直径13mm、直径10mm、直径7mm、直径4mm的圆盘各21个，
        在70kV、1mm铜的射线质情况下，产生近似对比度包括：
      </div>
      <table border="1" cellspacing="0" cellpadding="0" align="center"
      style="width: 100%; margin-top: 10px; border-collapse: collapse;">
        <tbody>
          <tr v-for="(trItem, trIndex) in data" :key="trIndex">
            <td style="padding: 10px 0;" v-for="(tdItem, tdIndex) in trItem" :key="tdIndex">{{ tdItem }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'LowContrastTestCardDialog',
  components: {},
  dicts: [],
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    type: {
      type: Number,
      default: 0,
    }
  },
  data() {
    return {
      data: [
        ['20.0%', '18.0%', '16.0%', '14.5%', '12.3%', '10.8%'],
        ['8.6%', '7.6%', '6.6%', '5.5%', '4.5%', '4.0%'],
        ['3.9%', '3.3%', '2.7%', '2.3%', '2.0%', '1.8%'],
        ['1.4%', '1.0%', '0.8%', '--', '--', '--'],
      ],
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.show
      },
      set(value) {
        this.$emit('update:show', value)
      }
    }
  },
  created() {
  },
  methods: {
    // 弹框打开时
    handleDialogOpen() {
    },
    // 弹框关闭时
    handleDialogClosed() {
    },
  }
}
</script>

<style lang="scss" scoped>
.low-contrast-test-card-dialog {

  ::v-deep .el-dialog__body {
    max-height: 90vh;
    overflow-y: auto;
  }

  table thead tr th {
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
  }

  table tbody tr td {
    padding: 3px 0;
    text-align: center;
  }
}
</style>